<template>
  <div id="information">
    <div id="header">
      <!-- 大屏 -->
      <div class="nav" v-if="screenWidth>750">
        <div class="logo">
          <router-link :to="{name:'index'}" tag="div" class="logo-nav">
            <img src="./static/img/logo-white.png" alt="">
            <div class="company-name">
              <p>昊源电子</p>
              <p class="pin">www.hzzhixun.cn</p>
            </div>
          </router-link>
        </div>
        <ul class="nav-lis">
          <router-link tag="li" :to="{name:'index'}" class="nav-li" :class="currentName == 'index'?'hot':''">首&nbsp;&nbsp;页</router-link>
          <router-link tag="li" :to="{name:'aboutUs'}" class="nav-li" :class="currentName == 'aboutUs'?'hot':''">关于我们
          </router-link>
          <router-link tag="li" :to="{name:'service'}" class="nav-li" :class="currentName == 'service'?'hot':''">服务范围
          </router-link>
          <router-link tag="li" :to="{name:'news'}" class="nav-li" :class="currentName == 'news'?'hot':''">新闻动态
          </router-link>
          <router-link tag="li" :to="{name:'case'}" class="nav-li" :class="currentName == 'case'?'hot':''">案例展示
          </router-link>
          <router-link tag="li" :to="{name:'callUs'}" class="nav-li" :class="currentName == 'callUs'?'hot':''">联系我们
          </router-link>
        </ul>
      </div>
      <!-- 小屏 -->
      <div class="nav" v-else>
        <ul class="nav-lis">
          <router-link tag="li" :to="{name:'index'}" class="nav-li" :class="currentName == 'index'?'hot':''">首&nbsp;&nbsp;页</router-link>
          <router-link tag="li" :to="{name:'aboutUs'}" class="nav-li" :class="currentName == 'aboutUs'?'hot':''">关于我们
          </router-link>
          <router-link tag="li" :to="{name:'service'}" class="nav-li" :class="currentName == 'service'?'hot':''">服务范围
          </router-link>
          <router-link tag="li" :to="{name:'news'}" class="nav-li" :class="currentName == 'news'?'hot':''">新闻动态
          </router-link>
          <router-link tag="li" :to="{name:'case'}" class="nav-li" :class="currentName == 'case'?'hot':''">案例展示
          </router-link>
          <router-link tag="li" :to="{name:'callUs'}" class="nav-li" :class="currentName == 'callUs'?'hot':''">联系我们
          </router-link>
        </ul>
      </div>
    </div>
    <div class="info" v-html="currentName == 'case'?infoData.PROFILE:infoData.NCONTENT"></div>
    <my-footer :screenWidth="screenWidth"></my-footer>
  </div>
</template>

<script>
  import myFooter from './footer'

  export default {
    name: 'information',
    data () {
      return {
        screenWidth: '',
        currentName: '',
        currentId: '',
        infoData:''
      }
    },
    components: {
      myFooter
    },
    methods: {
      getCase () {
        this.$jsonp(
          'http://sys.hzzhixun.cn/zxkjht/cases/appshowcase',
          {
            CASES_ID: this.currentId
          },
        ).then(res => {
          this.infoData = res.content
        }).catch(err => {
        })
      },
      getNews () {
        this.$jsonp(
          'http://sys.hzzhixun.cn/zxkjht/news/appshownews',
          {
            NEWS_ID: this.currentId
          },
        ).then(res => {
          this.infoData = res.content
        }).catch(err => {
        })
      }
    },
    mounted () {
      this.screenWidth = document.body.clientWidth
      window.onresize = () => {
        return (() => {
          this.screenWidth = document.body.clientWidth
        })()
      }
      this.currentName = this.$route.query.currentName
      this.currentId = this.$route.query.currentId
      if (this.$route.query.currentName == 'case') {
        this.getCase()
      } else if (this.$route.query.currentName == 'news') {
        this.getNews()
      }
    }
  }
</script>

<style scoped lang="scss">
  #information {

    @media only screen and (min-width: 100px) and (max-width: 768px) {
      #header {
        width: 100%;
        height: 55px;
        position: relative;
        top: 0;
        left: 0;
        z-index: 999;

        .nav {
          width: 100%;
          height: 55px;
          display: flex;
          margin: 0 auto;
          justify-content: center;
          align-items: center;

          .nav-lis {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .nav-li {
              width: 1.00rem;
              height: 0.40rem;
              font-size: 0.20rem;
              color: #6c6c6c;
              text-align: center;
              line-height: 0.40rem;
              border-radius: 0.20rem;
              cursor: pointer;
              -webkit-user-select: none;
              -ms-user-select: none;
              -moz-user-select: none;
              user-select: none;

              &.hot {
                background: #065ce5;
                color: #fff;
              }
            }
          }
        }
      }
    }

    @media (min-width: 768px) {
      #header {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        padding: 10px 0;
        z-index: 999;

        .nav {
          width: 750px;
          height: 55px;
          display: flex;
          margin: 0 auto;
          justify-content: center;
          align-items: center;

          .logo {
            width: 235px;
            height: 100%;
            margin-right: 26px;

            .logo-nav {
              width: 100%;
              height: 100%;
              display: flex;
              cursor: pointer;

              .company-name {
                font-size: 0.30rem;
                line-height: 0.36rem;
                color: #6c6c6c;

                .pin {
                  font-size: 0.18rem;
                  line-height: 0.18rem;
                }
              }
            }

            img {
              width: auto;
              height: 100%;
              margin-right: 0.15rem;
            }
          }

          .nav-lis {
            width: calc(100% - 261px);
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .nav-li {
              width: 90px;
              height: 40px;
              font-size: 16px;
              color: #6c6c6c;
              text-align: center;
              line-height: 40px;
              border-radius: 20px;
              cursor: pointer;
              -webkit-user-select: none;
              -ms-user-select: none;
              -moz-user-select: none;
              user-select: none;

              &.hot {
                background: #065ce5;
                color: #fff;
              }
            }
          }
        }
      }
    }

    @media (min-width: 992px) {
      #header {
        width: 100%;
        position: relative;
        top: 0;
        left: 0;
        padding: 30px 0;
        z-index: 999;

        .nav {
          width: 970px;
          height: 55px;
          display: flex;
          margin: 0 auto;
          justify-content: center;
          align-items: center;

          .logo {
            width: 235px;
            height: 100%;
            margin-right: 26px;

            .logo-nav {
              width: 100%;
              height: 100%;
              display: flex;
              cursor: pointer;

              .company-name {
                font-size: 0.30rem;
                line-height: 0.36rem;
                color: #6c6c6c;

                .pin {
                  font-size: 0.18rem;
                  line-height: 0.18rem;
                }
              }
            }

            img {
              width: auto;
              height: 100%;
              margin-right: 0.15rem;
            }
          }

          .nav-lis {
            width: calc(100% - 261px);
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .nav-li {
              width: 100px;
              height: 40px;
              font-size: 20px;
              color: #6c6c6c;
              text-align: center;
              line-height: 40px;
              border-radius: 20px;
              cursor: pointer;
              -webkit-user-select: none;
              -ms-user-select: none;
              -moz-user-select: none;
              user-select: none;

              &.hot {
                background: #065ce5;
                color: #fff;
              }
            }
          }
        }
      }
    }

    @media (min-width: 1200px) {
      #header {
        width: 100%;
        padding: 50px 0;
        position: relative;
        top: 0;
        left: 0;
        z-index: 999;

        .nav {
          width: 1200px;
          height: 55px;
          display: flex;
          margin: 0 auto;
          justify-content: center;
          align-items: center;

          .logo {
            width: 235px;
            height: 100%;
            margin-right: 26px;

            .logo-nav {
              width: 100%;
              height: 100%;
              display: flex;
              cursor: pointer;

              .company-name {
                font-size: 0.30rem;
                line-height: 0.36rem;
                color: #6c6c6c;

                .pin {
                  font-size: 0.18rem;
                  line-height: 0.18rem;
                }
              }
            }

            img {
              width: auto;
              height: 100%;
              margin-right: 0.15rem;
            }
          }

          .nav-lis {
            width: calc(100% - 261px);
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .nav-li {
              width: 140px;
              height: 40px;
              font-size: 24px;
              color: #6c6c6c;
              text-align: center;
              line-height: 40px;
              border-radius: 20px;
              cursor: pointer;
              -webkit-user-select: none;
              -ms-user-select: none;
              -moz-user-select: none;
              user-select: none;

              &.hot {
                background: #065ce5;
                color: #fff;
              }
            }
          }
        }
      }
    }

    .info {
      max-width: 12.48rem;
      min-height: 10.8rem;
      padding: 0.6rem 0.24rem 0;
      font-size: 0.24rem;
      margin: 0 auto;
    }
  }

</style>
